<!-- src/components/Chart2.vue -->
<template>
  <div class="chart-container">
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner"></div>
      <div class="loading-text">数据加载中...</div>
    </div>
    <div ref="chart" class="chart-wrapper"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { fetchData } from '../Api/api.js';

export default {
  data() {
    return {
      chart: null,
      hours: [],
      totalMsgCounts: [],
      loading: true
    };
  },
  async mounted() {
    try {
      const data = await fetchData('gettwo');
      this.hours = data.map(item => item.msgHour);
      this.totalMsgCounts = data.map(item => item.totalMsgCnt);
      this.initChart();
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      this.loading = false;
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);

      // 生成彩虹色系
      const rainbowColors = [
        '#FF355E', '#FF6037', '#FF9966', '#FFCC33',
        '#FFFF66', '#CCFF00', '#66FF66', '#50BFE6',
        '#FF6EFF', '#EE34D2', '#FF00CC'
      ];

      const option = {
        title: {
          text: '✨ 每小时消息量动态统计 ✨',
          left: 'center',
          textStyle: {
            color: '#FF6BFF',
            fontSize: 22,
            fontWeight: 'bold',
            textShadow: '0 0 10px rgba(255,107,255,0.7)'
          },
          subtext: '24小时消息流量趋势',
          subtextStyle: {
            color: '#50BFE6',
            fontSize: 14,
            textShadow: '0 0 5px rgba(80,191,230,0.5)'
          }
        },
        backgroundColor: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [
            { offset: 0, color: 'rgba(10,10,30,0.8)' },
            { offset: 1, color: 'rgba(5,5,15,0.9)' }
          ]
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(255,255,255,0.2)'
            }
          },
          formatter: params => {
            return `<div style="font-weight:bold;color:#FFCC33">${params[0].axisValue}时</div>
                    <div>消息量: <span style="color:#FF6BFF">${params[0].data}</span> 条</div>`;
          },
          backgroundColor: 'rgba(0,0,0,0.7)',
          borderColor: '#FF6BFF',
          borderWidth: 1,
          textStyle: {
            color: '#FFF'
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '15%',
          top: '25%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.hours,
          axisLine: {
            lineStyle: {
              color: '#50BFE6',
              width: 2,
              shadowColor: '#50BFE6',
              shadowBlur: 10
            }
          },
          axisLabel: {
            color: '#FFF',
            fontSize: 12,
            interval: 0,
            rotate: 45
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#FF6BFF'
            }
          },
          name: '时间(小时)',
          nameTextStyle: {
            color: '#FFCC33',
            fontSize: 14,
            padding: [10, 0, 0, 0]
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#50BFE6',
              width: 2,
              shadowColor: '#50BFE6',
              shadowBlur: 10
            }
          },
          axisLabel: {
            color: '#FFF',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.1)',
              type: 'dashed'
            }
          },
          name: '消息数量(条)',
          nameTextStyle: {
            color: '#FFCC33',
            fontSize: 14,
            padding: [0, 0, 10, 0]
          }
        },
        series: [{
          name: '消息数量',
          type: 'line',
          data: this.totalMsgCounts,
          smooth: true,
          symbol: 'circle',
          symbolSize: 10,
          showSymbol: false,
          itemStyle: {
            color: function(params) {
              return rainbowColors[params.dataIndex % rainbowColors.length];
            },
            borderColor: '#FFF',
            borderWidth: 2,
            shadowColor: function(params) {
              return rainbowColors[params.dataIndex % rainbowColors.length];
            },
            shadowBlur: 10
          },
          lineStyle: {
            width: 4,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#FF355E' },
              { offset: 0.2, color: '#FF9966' },
              { offset: 0.4, color: '#CCFF00' },
              { offset: 0.6, color: '#50BFE6' },
              { offset: 0.8, color: '#FF6EFF' },
              { offset: 1, color: '#FF00CC' }
            ]),
            shadowColor: 'rgba(255,255,255,0.5)',
            shadowBlur: 10,
            shadowOffsetY: 5
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(255,53,94,0.5)' },
              { offset: 1, color: 'rgba(255,0,204,0.1)' }
            ])
          },
          emphasis: {
            scale: true,
            itemStyle: {
              shadowColor: '#FFF',
              shadowBlur: 20
            }
          },
          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return idx * 100;
          }
        }],
        animationDuration: 2000
      };

      this.chart.setOption(option);

      // 自动高亮动画
      let currentIndex = -1;
      setInterval(() => {
        const dataLen = this.totalMsgCounts.length;
        currentIndex = (currentIndex + 1) % dataLen;

        this.chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currentIndex
        });
      }, 2000);

      window.addEventListener('resize', this.handleResize);
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.chart) {
      this.chart.dispose();
    }
  }
};
</script>

<style scoped>
.chart-container {
  position: relative;
  width: 1070px;
  height: 500px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
  inset 0 0 15px rgba(255, 107, 255, 0.3);
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.chart-wrapper {
  width: 100%;
  height: 100%;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 900px;
  height: 100%;
  background: rgba(10, 10, 30, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  border-radius: 16px;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid transparent;
  border-top-color: #FF6BFF;
  border-bottom-color: #50BFE6;
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
  box-shadow: 0 0 10px rgba(255, 107, 255, 0.5);
}

.loading-spinner:before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 3px solid transparent;
  border-top-color: #FFCC33;
  border-bottom-color: #FF355E;
  border-radius: 50%;
  animation: spinReverse 2s linear infinite;
}

.loading-text {
  margin-top: 20px;
  color: #FFF;
  font-size: 16px;
  text-shadow: 0 0 5px #FF6BFF;
  letter-spacing: 1px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spinReverse {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
</style>